<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.模板引擎的使用</title>
  </head>

  <body>
    <div id="container"></div>
  </body>
  <!-- 1.将模板引擎的页面引入到当前页面 -->
  <script src="https://unpkg.com/art-template/lib/template-web.js"></script>
  <!-- 2.准备 art-template 模板 -->
  <script id="tpl" type="text/html">
    <!-- 5. 通过模板语法告诉模板引擎，数据和html字符串要如何拼接 -->
  <div class="box">
    <h1>{{name}} {{age}}</h1>
  </div>
  </script>
  <script>
    // 3. 告诉模板引擎将哪一个模板和哪个数据进行拼接
    // 模板ID，需要渲染的数据
    let html = template("tpl", {
      name: "jason",
      age: 18
    });
    console.log(html);
    // 4. 将拼接好的html字符串添加到页面中
    let box = document.querySelector("#container");
    box.innerHTML = html;
  </script>

</html>